<template>
  <van-nav-bar title="基本资料" left-arrow fixed @click-left="onBack" />

  <div class="clear"></div>
  <div class="h50"></div>
  <div class="clear"></div>
  <div class="user">
    <div class="user-image">
      <img :src="LoginAuth.avatar_cdn" alt="" />
    </div>
  </div>

  <div class="form">
    <van-form @submit="onProfile">
      <van-field
        v-model="LoginAuth.mobile"
        readonly
        name="mobile"
        label="手机号"
        placeholder="手机号"
        label-align="right"
        label-width="4.5em"
        colon
        :rules="[{ required: true, message: '请填写手机号' }]"
      />

      <van-field
        v-model="LoginAuth.nickname"
        name="nickname"
        label="昵称"
        placeholder="昵称"
        label-align="right"
        label-width="4.5em"
        colon
        :rules="[{ required: true, message: '请填写昵称' }]"
      />

      <van-field
        v-model="LoginAuth.email"
        name="email"
        label="邮箱"
        placeholder="邮箱"
        label-align="right"
        label-width="4.5em"
        colon
        :rules="[{ required: true, message: '请填写邮箱' }]"
      />

      <van-field
        type="password"
        v-model="LoginAuth.password"
        name="password"
        label="密码"
        placeholder="密码为空就不修改密码"
        label-align="right"
        label-width="4.5em"
        colon
      />

      <van-field name="gender" label="性别" label-align="right" label-width="4.5em" colon>
        <template #input>
          <van-radio-group v-model="LoginAuth.gender" direction="horizontal">
            <van-radio name="0">保密</van-radio>
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        v-model="LoginAuth.region_text"
        is-link
        readonly
        name="region"
        label="地区选择"
        placeholder="点击选择城市"
        @click="showArea = true"
        label-align="right"
        label-width="4.5em"
        colon
      />

      <!-- 头像 -->
      <van-field name="avatar" label="头像上传" label-align="right" label-width="4.5em" colon>
        <template #input>
          <van-uploader v-model="avatar" :max-count="1" />
        </template>
      </van-field>

      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 提交 </van-button>
      </div>
    </van-form>

    <!-- 地区弹出层 -->
    <van-popup v-model:show="showArea" position="bottom">
      <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" v-model="LoginAuth.district" />
    </van-popup>
  </div>
</template>
<script>
  import { areaList } from '@vant/area-data'
  import { showNotify } from 'vant'
  export default {
    data() {
      return {
        LoginAuth: {},
        avatar: [],
        showArea: false,
        areaList,
      }
    },
    created() {
      this.LoginAuth = this.$cookies.get('LoginAuth') ? this.$cookies.get('LoginAuth') : {}

      if (this.LoginAuth.avatar) {
        this.avatar = [
          {
            url: this.LoginAuth.avatar_cdn,
          },
        ]
      }
    },
    methods: {
      onBack() {
        this.$router.go(-1)
      },
      // 修改资料
      async onProfile(values) {
        let data = {
          id: this.LoginAuth.id,
          nickname: values.nickname,
          email: values.email,
          gender: values.gender,
          province: this.LoginAuth.province,
          city: this.LoginAuth.city,
          district: this.LoginAuth.district,
        }

        if (values.password) {
          data.password = values.password
        }

        let avatar = values.avatar[0].file ? values.avatar[0].file : ''

        if (avatar) {
          data.avatar = avatar
        }

        let result = await this.$api.profile(data)

        if (result.code === 1) {
          showNotify({
            type: 'success',
            message: result.msg,
            duration: 1500,
            onClose: () => {
              this.$router.push('/business/base/index')
            },
          })
        } else {
          showNotify({
            type: 'warning',
            duration: 1500,
            message: result.msg,
          })
        }
      },
      onConfirm(values) {
        this.showArea = false

        // 获取选中地区
        let [province, city, district] = values.selectedOptions

        let region_text = ''

        if (province.value) {
          region_text = province.text + '-'
          this.LoginAuth.province = province.value
        }

        if (city.value) {
          region_text += city.text + '-'
          this.LoginAuth.city = city.value
        }

        if (district.value) {
          region_text += district.text
          this.LoginAuth.district = district.value
        }

        this.LoginAuth.region_text = region_text
      },
    },
  }
</script>

<style>
  @import url('/assets/css/profile.css');
</style>
